<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">

		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">

		<style>
			.grey_button {
				border: grey solid 1px;
				color: grey;
				float: left;
				padding: 5px;
				margin-right: 1px;
				margin-left: 1px;
				margin-bottom: 3px;
				margin-top: 3px;
				font-size: 14px;
				font-family: "Microsoft YaHei";
			}
			
			.blue_button {
				border: #179efa solid 1px;
				color: white;
				float: left;
				padding: 5px;
				margin-right: 1px;
				margin-left: 1px;
				margin-bottom: 3px;
				margin-top: 3px;
				background-color: #179efa;
				font-size: 14px;
				font-family: "Microsoft YaHei";
			}
			
			.nameBar {
				font-size: 16px;
				margin: 6px 0;
				clear: both;
				line-height: 16px;
				padding: auto 0;
				color: #179efa;
			}
			
			.check_chooseAll {
				float: right;
				height: 12px;
				width: 12px;
				background-color: #179efa;
				margin-left: 3px;
				margin-right: 20px;
			}
			
			.uncheck_chooseAll {
				float: right;
				height: 12px;
				width: 12px;
				background-color: white;
				border: grey solid 1px;
				margin-left: 3px;
				margin-right: 20px;
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 id="headtitle" class="mui-title">条件筛选</h1>
		</header>
		<div class="mui-content" style="width:100%;margin:5px auto;">

			<div class="nameBar" style="">
				<div style="float:left;height:14px;width:14px;background-color: #179efa;margin-left:20px;margin-right:3px;"></div>
				<span>行政区名</span>

				<div id="xzqmSelcet_check" class="uncheck_chooseAll" style=""></div>
				<span style="float:right;font-size: 12px;">全选</span>
			</div>
			<div id="xzqmSelcet" style="margin-top:8px;padding-left: 10px;">
				<div class="grey_button">浦东</div>
				<div class="grey_button">黄浦</div>
				<div class="grey_button">徐汇</div>
				<div class="grey_button">长宁</div>
				<div class="grey_button">静安</div>
				<div class="grey_button">普陀</div>
				<div class="grey_button">虹口</div>
				<div class="grey_button">杨浦</div>
				<div class="grey_button">闵行</div>
				<div class="grey_button">宝山</div>
				<div class="grey_button">青浦</div>
				<div class="grey_button">松江</div>
				<div class="grey_button">嘉定</div>
				<div class="grey_button">奉贤</div>
				<div class="grey_button">金山</div>
				<div class="grey_button">崇明</div>
			</div>

			<div class="nameBar" style="margin-top: 100px;">
				<div style="float:left;height:14px;width:14px;background-color: #179efa;margin-left:20px;margin-right:3px;"></div>
				<span>水量类别</span>

				<div id="sllbSelcet_check" class="uncheck_chooseAll" style=""></div>
				<span style="float:right;font-size: 12px;">全选</span>
			</div>
			<div id="sllbSelcet" style="margin-top:8px;padding-left: 10px;">
				<div class="grey_button">采灌采</div>
				<div class="grey_button">采灌灌</div>
				<div class="grey_button">矿泉采</div>
				<div class="grey_button">普通采</div>
				<div class="grey_button">专灌</div>
			</div>

			<div class="title" style="width:100%; height:50px;line-height: 40px;font-size: 18px;margin-top:80px;clear:both;color:white;">
				<div id="search_btn_dtj" style="margin-left:10%;margin-right:20%;font-size:16px;width:30%; height:40px;float: left;text-align:center;background-color:#179efa;border-radius: 3px;">确认</div>
				<div id="reset_dtj" style="font-size:16px;width:30%; height:40px;float: left;text-align:center;background-color:#9c9c9c;border-radius: 3px;">重置</div>
			</div>

		</div>

	</body>

	<script src="../lib/mui/mui.min.js"></script>
	<script type="text/javascript" src="../lib/jquery-2.1.0.min.js"></script>
	<script src="../js/winVisibleControl.js"></script>
	<script>
		//GMQuery.init();
		//var feature;
		mui.init({
			swipeBack: true //启用右滑关闭功能
		});

		mui.plusReady(function() {
			plus.navigator.setStatusBarStyle('dark');
			var selfDtj = plus.webview.currentWebview();

			//			document.getElementById('erji').innerHTML = '<div class="grey_button">良友</div><div class="grey_button">牛奶</div><div class="grey_button">糖酒</div><div class="grey_button">益民</div><div class="grey_button">长江</div><div class="grey_button">蔬菜</div><div class="grey_button">超市</div><div class="grey_button">党校</div>';
			//			document.getElementById('erji').innerHTML += '<div class="grey_button">东海</div><div class="grey_button">上农</div><div class="grey_button">五四</div><div class="grey_button">西郊国际</div><div class="grey_button">光明地产</div><div class="grey_button">轻工控股</div><div class="grey_button">光明乳业</div><div class="grey_button">海博投资</div><div class="grey_button">梅林股份</div><div class="grey_button">光明置地</div><div class="grey_button">水产集团</div>';

			//alert(selfDtj.param);
			//cy 获得传递参数
			// var self = plus.webview.currentWebview(); 
			//document.getElementById("headtitle").innerHTML="条件查询";

			//       feature= self.param;
			mui('#xzqmSelcet').on('tap', 'div', function() {
				if($(this).attr("class") == "grey_button") {
					$(this).removeClass("grey_button");
					$(this).addClass("blue_button");
				} else {
					$(this).removeClass("blue_button");
					$(this).addClass("grey_button");
					$('#xzqmSelcet_check').removeClass("check_chooseAll");
					$('#xzqmSelcet_check').addClass("uncheck_chooseAll");
				}
			});

			var xzqmSelcet_check_button = document.getElementById("xzqmSelcet_check");
			xzqmSelcet_check_button.addEventListener("tap", function(event) {
				if($(this).attr("class") == "check_chooseAll") {
					$(this).removeClass("check_chooseAll");
					$(this).addClass("uncheck_chooseAll");

					$('#xzqmSelcet div').removeClass();
					$('#xzqmSelcet div').addClass("grey_button");
				} else {
					$(this).removeClass("uncheck_chooseAll");
					$(this).addClass("check_chooseAll");

					$('#xzqmSelcet div').removeClass();
					$('#xzqmSelcet div').addClass("blue_button");
				}
			});

			mui('#sllbSelcet').on('tap', 'div', function() {
				if($(this).attr("class") == "grey_button") {
					$(this).removeClass("grey_button");
					$(this).addClass("blue_button");
				} else {
					$(this).removeClass("blue_button");
					$(this).addClass("grey_button");
					$('#sllbSelcet_check').removeClass("check_chooseAll");
					$('#sllbSelcet_check').addClass("uncheck_chooseAll");
				}
			});

			var sllbSelcet_check_button = document.getElementById("sllbSelcet_check");
			sllbSelcet_check_button.addEventListener("tap", function(event) {
				if($(this).attr("class") == "check_chooseAll") {
					$(this).removeClass("check_chooseAll");
					$(this).addClass("uncheck_chooseAll");

					$('#sllbSelcet div').removeClass();
					$('#sllbSelcet div').addClass("grey_button");
				} else {
					$(this).removeClass("uncheck_chooseAll");
					$(this).addClass("check_chooseAll");

					$('#sllbSelcet div').removeClass();
					$('#sllbSelcet div').addClass("blue_button");
				}
			});

			var btn_reset_dtj = document.getElementById("reset_dtj");
			//监听点击事件：条件查询
			btn_reset_dtj.addEventListener("tap", function(event) {

				$('input').val("");
				$('input').blur();
				$('.blue_button').addClass("grey_button").removeClass("blue_button");
				$('.check_chooseAll').removeClass("check_chooseAll").addClass("uncheck_chooseAll");

			});
			//获取usid

			//功能
			//var resultDisplay_test;
			var btn_search_btn_dtj = document.getElementById('search_btn_dtj');
			btn_search_btn_dtj.addEventListener('tap', function() {
				resultDisplay = 0;
				//GMQuery.dtjQuery(deepwellUrl);

				var query_str;

				//var i=0;

				//确定查询语句
				query_str = getQueryStr();

				//      		var launchWebview=	plus.webview.getSecondWebview(); 
				var launchWebview = plus.webview.getWebviewById("index.html");
				mui.fire(launchWebview, 'eventend', {
					strtemp: query_str
				});
				mui.back();

			});

			function getSQL(Arr, str, fieldval, txt) {
				var Arr2 = [];

				Arr2 = Arr.split(' ');
				if(Arr2.length == 0) {
					return str;
				}
				var con = '';
				for(var i = 0; i < Arr2.length; i++) {
					if(Arr2[i] == "") {
						continue;
					}
					if(con != "") {
						con = con + ' OR ';
					}

					con = con + fieldval + ' = \'' + Arr2[i].toString() + '\'';
				}
				if(str != "" && con != "") {
					str = str + ' AND ';
				}
				if(con != "") {
					str = str + ' ( ' + con + ') ';
				}

				return str;
			}

			function getQueryStr() {
				//		GMQuery.resultCon='查询条件:';
				//查询条件，类似于sql语句的where子句
				var str = '';
				var xzqm_str = "";
				for(var i = 0; i < $('#xzqmSelcet div').length; i++) {
					if($('#xzqmSelcet div').eq(i).attr("class") == "blue_button") {
						xzqm_str += $('#xzqmSelcet div').eq(i).text();
						xzqm_str += ' ';
					}
				}

				var sllb_str = "";
				for(var i = 0; i < $('#sllbSelcet div').length; i++) {
					if($('#sllbSelcet div').eq(i).attr("class") == "blue_button") {
						sllb_str += $('#sllbSelcet div').eq(i).text();
						sllb_str += ' ';
					}
				}

				if(typeof(sllb_str) != 'undefined' || typeof(xzqm_str) != 'undefined') {
					str = getSQL(sllb_str, str, 'sllb', '水量类别');
					str = getSQL(xzqm_str, str, 'xzqm', '行政区名');
					if(str == '') {
						//str = "1=1";
						mui.alert('请选择筛选条件！', "提示");
					}
				} else {
					mui.alert('请选择筛选条件！', "提示");
				}

				//document.getElementById('gjzres_tbl_con').innerHTML = GMQuery.resultCon+'<br>';
				return str;

			}
			//条件查询
			//获得sql查询语句，并在网页显示查询条件。

		});
	</script>

</html>